<template>
  <div>
    <titleHeadSearchs></titleHeadSearchs>
    <el-row class="icon_menu">
      <el-col :span="8"
              v-for="(item,index) in icon_list" :key="item.notice"
              :class="item.isChange?'changeIcon':'initIcon'"
              @click.native="changeColor(index)"
      >
        <p><i :class="item.icon"></i></p>
        <p><span>{{item.notice}}</span></p>
      </el-col>
    </el-row>
  </div>

</template>
<script>
export default {
  data () {
    return {
      icon_list: [
        {
          icon: 'el-icon-goods',
          notice: '商区',
          isChange: false
        },
        {
          icon: 'el-icon-menu',
          notice: '分类',
          isChange: false
        },
        {
          icon: 'el-icon-sort',
          notice: '排序',
          isChange: false
        }
      ],
      select_open: false
    }
  },
  methods: {
    changeColor (index) {
      console.log(1)
      this.icon_list.forEach(function (item) {
        item.isChange = false
      })
      this.icon_list[index].isChange = true
      this.select_open = true
    }
  }
}
</script>
<style lang="scss" scoped>
  @at-root .icon_menu{
    padding-top: 24px;
    padding-bottom: 24px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    border-bottom: 1px solid #656565;
    i{
      font-size: 50px;
    }
    p:last-child{
      font-size: 30px;
      margin-top: 10px;
      font-weight: 500;
    }
    @at-root .initIcon{
      color: #656565;
    }
    @at-root .changeIcon{
      color: #f56f3d;
    }
  }
  @at-root .change_list{
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 30px;
    font-weight: 500;
  }
</style>
